<template>
  <div class="flow-wrap" v-show="false">
    <div class="flow-wrap-charts-left">
      <div class="flow-wrap-plat">
        <div
          v-for="(item,index) in platName"
          :key="index" 
          :class="['flow-wrap-plat-name',{'plat-active':platIndex === index}]" 
          @click="clickPlat(index)"
          >{{item}}
        </div>
        <!-- <div class="flow-wrap-plat-name">抖音</div>
        <div class="flow-wrap-plat-name">淘宝直播</div> -->
      </div>
      <div class="flow-left-wrap" v-if="platIndex === 0">
        <div class="flow-bar-top">
          <div class="flow-bar-title">昨日掉粉时间分布</div>
          <div class="flow-bar-content">
            <div id="becharts">  
            </div>
          </div>
        </div>
        <div class="flow-line-bottom">
          <div class="flow-bar-title">掉粉趋势</div>
          <div class="flow-bar-number">
            <div class="flow-bar-number-left">粉丝数</div>
            <div class="flow-bar-number-right">
              <div 
                :class="['flow-bar-day',{'active':curIndex===index}]" 
                @click="changeBg(index)"
                v-for="(item,index) in dayItem"
                :key="index"
              >
                {{item}}
              </div>
            </div>
          </div>
          <div class="flow-bar-content-l">
            <div id="lineEcharts">  
            </div>
          </div>
        </div>
      </div>
      <div class="flow-left-wrap" v-if="platIndex === 1">
        <div class="flow-bar-top">
          <div class="flow-bar-title">昨日掉粉时间分布</div>
          <div class="flow-bar-content">
            <div id="becharts">  
            </div>
          </div>
        </div>
        <div class="flow-line-bottom">
          <div class="flow-bar-title">掉粉趋势</div>
          <div class="flow-bar-number">
            <div class="flow-bar-number-left">粉丝数</div>
            <div class="flow-bar-number-right">
              <div 
                :class="['flow-bar-day',{'active':curIndex===index}]" 
                @click="changeBg(index)"
                v-for="(item,index) in dayItem"
                :key="index"
                >
                {{item}}
              </div>
            </div>
          </div>
          <div class="flow-bar-content-l">
            <div id="lineEcharts">  
            </div>
          </div>
        </div>
      </div>
      <div class="flow-left-wrap" v-if="platIndex === 2">
        <div class="flow-bar-top">
          <div class="flow-bar-title">昨日掉粉时间分布</div>
          <div class="flow-bar-content">
            <div id="becharts">  
            </div>
          </div>
        </div>
        <div class="flow-line-bottom">
          <div class="flow-bar-title">掉粉趋势</div>
          <div class="flow-bar-number">
            <div class="flow-bar-number-left">粉丝数</div>
            <div class="flow-bar-number-right">
              <div 
                :class="['flow-bar-day',{'active':curIndex===index}]" 
                @click="changeBg(index)"
                v-for="(item,index) in dayItem"
                :key="index"
                >
                {{item}}
              </div>
            </div>
          </div>
          <div class="flow-bar-content-l">
            <div id="lineEcharts">  
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flow-wrap-fans-right">
      <div class="flow-fans-top">
        <div class="flow-fans-bg">
          <div class='bg-left'>
            <div>昨日涨粉数</div> 
            <img src="~assets/images/top-arrow.png">
          </div>
          <div class='bg-right'>5000人</div>
        </div>    
        <div class="comment-content">
          <el-scrollbar style="height:100%">
            <div class="flow-fans-comments" v-for="(item,index) in pastDate" :key="index">
              <div class="flow-fans-name">{{item.nickName}}</div>
              <div class="flow-fans-comment">{{item.comment}}</div>
            </div>
          </el-scrollbar> 
        </div>   
      </div>
      <div class="flow-fans-bottom down">
        <div class="flow-fans-bg bot-bg">
          <div class='bg-left'>
            <div>昨日掉粉数</div>
            <img src="~assets/images/bottom-arrow.png">
          </div>
          <div class='bg-right'>280人</div>
        </div>
        <div class="comment-content">
          <el-scrollbar style="height:100%">
            <div class="flow-fans-comments" v-for="(item,index) in pastDate1" :key="index">
              <div class="flow-fans-name">{{item.nickName}}</div>
              <div class="flow-fans-comment">{{item.comment}}</div>
            </div>
          </el-scrollbar> 
        </div>    
      </div>
    </div>
  </div>
  </template>
  <script>
  export default {
    async fetch({store}) {
      await store.commit('setMyAddFans',3)
    },
    layout: "internalouts",
    data(){
      return{
        platName:['快手','淘宝','抖音'], //平台名称
        platIndex:0, //平台索引
        dataList:[5,3,2.5,3.5,4.3,5.2,1.856,4.562,0.789,0.456,2.3,3.4,4.5,2.5,3.1,2.05,3.15,4.13,5.22,2.856,3.562,3.789,4.456,4.3,2.4,0.5], //柱状图数据
        dayItem:['7天','15天','30天'],
        curIndex:0, //7天，15天，30天数据变化的背景状态颜色切换索引
        show:false,//显示连麦弹窗
        lineDataA:[5,3,2.5,1.856,4.562,0.789,0.456], //7天的数据
        lineDataB:[4, 5, 3.5, 3, 3.45, 2.7, 1,2,2.1,1.3,1.5,2.3,2.4,3.4,1.6], //15天数据a
        lineDataC:[4, 5, 3.5, 3, 3.45, 2.7, 1,2,2.1,1.3,1.5,2.3,2.4,3.4,1.6,4, 5, 3.5, 3, 3.45, 2.7, 1,2,2.1,1.3,1.5,2.3,2.4,3.4,1.6], //30天数据
        dataLineA:[5,3,2.5,1.856,4.562,0.789,0.456], //七天数据初始化的默认数据
        // x轴的日期
        dateDataA:['2020-04-19','2020-04-20','2020-04-21','2020-04-22','2020-04-23','2020-04-24','2020-04-25'],
        dateDataB:['2020-04-19','2020-04-20','2020-04-21','2020-04-22','2020-04-23','2020-04-24','2020-04-25','2020-04-26','2020-04-27','2020-04-28','2020-04-29','2020-04-30','2020-05-01','2020-05-02','2020-05-03',],
        dateDataC:['2020-04-19','2020-04-20','2020-04-21','2020-04-22','2020-04-23','2020-04-24','2020-04-25','2020-04-26','2020-04-27','2020-04-28','2020-04-29','2020-04-30','2020-05-01','2020-05-02','2020-05-03','2020-05-04','2020-05-05','2020-05-06','2020-05-07','2020-05-08','2020-05-09','2020-05-10','2020-05-11','2020-05-12','2020-05-13','2020-05-14','2020-05-15','2020-05-16','2020-05-17','2020-05-18'],
        xDateA:['2020-04-19','2020-04-20','2020-04-21','2020-04-22','2020-04-23','2020-04-24','2020-04-25'], //x轴的日期初始化的默认数据
        pastDate:[ //昨日涨粉
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
        ],
        pastDate1:[ //昨日掉粉
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
          {nickName:'昵称',comment:'评论'},{nickName:'昵称',comment:'评论'},
        ]
      }
    },
    methods:{
      getData(){ //热销商品
        let params ={
        }
        this.$axios.$post('hotsList',params).then(res => {
          if(res.status === 200 ){
          }else{
            this.$message.warning(res.msg)
          }
        })
        .catch(error => {
          this.$message.warning('请求失败')
        })
      },
      orderLin() {//echarts柱状图
        var myChart = this.$echarts.init(document.getElementById("becharts"));
        var option = {
          textStyle:{
            color:"#808080"
          },
          // tooltip:{ //文字提示
          //     trigger:'axis'
          // },
          xAxis: {
            type: "category",
            data:['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],
            axisLine:{
              lineStyle:{
                color:'#d1d1d1',
              },
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval:1, //代表显示所有x轴每间隔标签显示,0代表默认的不间隔,1代表间隔一个刻度
            }
          },
          yAxis: {
              // 纵轴标尺固定
            type: "value",
            scale: true,
            max: 6,//最大刻度
            min: 0,//最小刻度
          //   splitNumber : 1
            axisTick: {//是否显示坐标轴刻度
              show: false,
            },
            splitLine: {//设置x轴虚线的
              show:true,
              lineStyle: {
                type: 'dashed',
                color:'#e1e1e1'
              } 
            }
          },
          grid: { //x轴y轴偏移
            x: 25,
            y: 10,
            width: "95%", // 宽度
            height: "79%", // 高度
          },
          series: {
            data:this.dataList, //设置柱状图数据
            type: "bar",
            barWidth:'40%', //设置柱状图的宽度大小
            barMaxWidth:'50%',  //设置柱状图的最大宽度大小,自适应
            lineStyle: {
              color: "#0096e6",
              width: 2,
              type: "solid"
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果
              color:'#9cdcfe', 
              normal: {
                color:'#9cdcfe',//设置柱状图的背景色
                //柱形图圆角，初始化效果
                barBorderRadius:[15, 15, 0, 0]
              }
            },
          }
        };
        myChart.setOption(option);
      },
      fansRecLine() {//echarts折线图
          var myChart = this.$echarts.init(document.getElementById("lineEcharts"));
          var option1 = {
            textStyle:{
              color:"#808080"
            },
            tooltip:{
              trigger:'axis',
              backgroundColor:'rgba(255,255,255,0.9)', //设置背景图片 rgba格式
              textStyle:{
                color:'#666666',  //设置文字颜色
              },
              borderWidth: "1", //边框宽度设置
              borderColor:'#ffffff', //边框颜色设置
              formatter: '{a}: {c}', //设置提示框的文字
              extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' //设置提示框的背景阴影
            },
            xAxis: {
              type: "category",
              data:this.xDateA, //显示x轴的坐标
              // data:['2020','2020','2020','2020','2020','2020'],
              axisLine:{
                lineStyle:{
                  color:'#d1d1d1'
                }
              },
              axisTick: { //坐标轴刻度和值的设置
                show: false, //不显示刻度
                alignWithLabel: true //设置间隔值
              },
              axisLabel: { //展现坐标轴间隔几个值显示
                // interval:1, 
                rotate:45, //代表逆时针旋转45度 
              }
            },
            yAxis: {
              // 纵轴标尺固定
              type: "value",
              scale: true,
              max: 6,
              min: 0,
            //   splitNumber : 1
              axisTick: { //是否显示坐标轴刻度
                show: false
              },
              splitLine: { //设置x轴虚线
                show:true,
                lineStyle: {
                  type: 'dashed',
                  color:'#e1e1e1'
                } 
              },
            },
            grid: {//x轴y轴偏移
              x: 50, //x轴偏移
              y: 10, //y轴偏移
              width: "90%", // 宽度
              height: "70%"// 高度
            },
            series: [
              {
                data:this.dataLineA, //x轴对应的值
                name:'粉丝数',
                type: "line",       
                smooth:true,  //这个是把折线变成曲线
                symbol: "circle", //设置折线图上的小圆点
                symbolSize: 6, //设置小圆点大小
                lineStyle: {
                  color: "#fcd331", //设置折线图的折线颜色
                  width: 2, //设置折线图的宽度
                  type: "solid"   
                },
                itemStyle: {
                  color: "#fcd331", //设置圆点颜色以及线性渐变的起始色的
                },
                areaStyle: { //设置echarts背景线性渐变颜色的
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#fcd331' // 0% 处的颜色
                    }, {
                        offset: 0.5, color: '#fdedae' // 50% 处的颜色
                    }, {
                        offset: 1, color: '#fef6d7' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                },
              }
            ]
          };
          myChart.setOption(option1);
      },
      changeBg(index){ //7天，15天，30天数据
        this.curIndex=index;
        if(index == 0){
            this.dataLineA = this.lineDataA;
            this.xDateA = this.dateDataA;
        }else if(index == 1){
            this.dataLineA = this.lineDataB;
            this.xDateA = this.dateDataB;
        }else{
            this.dataLineA = this.lineDataC;
            this.xDateA = this.dateDataC;
        }
        this.fansRecLine() //点击的时候再次调用数据
      },
      clickPlat(index){ //平台切换
        this.platIndex = index;
        this.$nextTick(() => {
          this.orderLin()
          this.fansRecLine()
        });
      }
    },
    mounted(){
     // this.getData()
      this.orderLin()
      this.fansRecLine()
    }
  }
  </script>
  
  <style scoped>
    .flow-wrap{
      display:flex;
    }
    .flow-wrap-charts-left{
      width:602px;
      background:url(~assets/images/fans-bg.png) no-repeat -2px 0;
      box-sizing:border-box;
      padding-top: 30px;
    }
    /* plat begin */
    .flow-wrap-plat{
      display:flex;
      font-size:14px;
      cursor:pointer;
      font-weight:400;
      padding-left:40px;
      position:relative;
    }
    .flow-wrap-plat-name{
      line-height:-4px;
      letter-spacing:1px;
      position:absolute;
      top:-18px;
    }
    .flow-wrap-plat-name:nth-child(1){
      left:50px;
    }
    .flow-wrap-plat-name:nth-child(2){
      left:182px;
    }
    .flow-wrap-plat-name:nth-child(3){
      right:253px;
    }
    .plat-active{
      color:#0096e6;
    }
    /* plat end */
    .flow-wrap-fans-right{
      margin-left:20px;
    }
    .flow-fans-bottom,.flow-bar-bottom{
      margin-top:30px;
    }
    .flow-bar-top,.flow-line-bottom{
      background:#ffffff;
      padding:20px 20px 20px 20px;
      height:300px;
    }
    .flow-bar-title{
      color:#333333;
      font-size:18px;
      font-weight:400;
    }
    .flow-bar-content{
      margin-top:20px;
    }
    .flow-bar-content-l{
      margin-top:10px;
    }
    .flow-bar-content #becharts{
      width:555px;
      height:212px;
    }
    .flow-bar-content-l #lineEcharts{
      width:555px;
      height:222px;
    }
    .flow-bar-number{
      width:544px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:20px;
      margin-left:10px;
    }
    .flow-bar-number-left{
      font-size:14px;
      font-weight:400;
    }
    .flow-bar-number-right{
      width:140px;
      height:23px;
      display:flex;
      align-items:center;
      cursor:pointer;
      border:1px solid #f4f4f4;
      border-radius:4px;
      box-sizing:border-box;
      box-shadow:0 0 4px #f4f4f4;
      overflow:hidden;
    }
    .flow-bar-number-right .flow-bar-day{
      flex:1;
      height:23px;
      line-height:23px;
      text-align:center;
    }
    .flow-bar-day:nth-child(1){
      border-top-left-radius:4px;
      border-bottom-left-radius:4px;
    }
    .flow-bar-day:nth-child(3){
      border-top-right-radius:4px;
      border-bottom-right-radius:4px;
    }
    .flow-bar-day:nth-child(2),.flow-bar-day:nth-child(3){
      border-left:1px solid #f4f4f4
    }
    .flow-bar-number-right .active{
      background:#0096e6;
      color:#ffffff;
    }
    .flow-wrap-fans-right{
      width:338px;
    }
    .flow-fans-top,.flow-fans-bottom{
      height:306px;
      box-sizing:border-box;
      border-radius:4px;
    }
    .flow-fans-bg{
      height:44px;
      background: #fce895;
      width:338px;
      padding:14px 0px 24px 22px;
      box-sizing:border-box;
      font-weight:400;
      display:flex;
      font-size:18px;
      align-items:center;
      justify-content:center;
    }
    .bg-left{
      position:relative;
      width:169px;
      height:44px;
      line-height:54px;
    }
    .bg-right{
      width:149px;
      height:44px;
      line-height:54px;
    }
    .bg-left img{
      position:absolute;
      top:18px;
      left:95px;
    }
    .comment-content{
      padding-left:22px;
      height:320px;
      background:#ffffff;
    }
    .flow-fans-comments{
      display:flex;
      padding-top:20px;
      font-weight:400;
    }
    .flow-fans-name{
      width:169px;
    }
    .flow-fans-comment{
      width:149px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .bot-bg{
      background:#c2eaff;
    }
    .flow-fans-top,.flow-fans-bottom{
      height:365px;
    }
    .down{
      margin-top:20px !important;
    }
    /* 修改elementUI样式 */
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    /deep/ .el-scrollbar__thumb {
      background: ;
    }
    /deep/ .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
      white-space: nowrap;
    }
  </style>
  